<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>无缝文字滚动</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
            box-sizing: border-box;
        }

        #wrapper {
            position: relative;
            width: 500px;
            height: 50px;
            margin: 100px auto;
            border: 1px solid #000;
            overflow: hidden;
        }

        #list {
            display: flex;
            position: absolute;
            height: 50px;
        }

        li {
            display: flex;
            align-items: center;
            margin-left: 30px;
            padding: 0 10px;
            background: rgb(158, 248, 218);
        }
    </style>
</head>
<body>
<div id="wrapper">
    <ul id="list">
        <li>111111111111111</li>
        <li>222222222222222</li>
    </ul>
</div>

<script>
    let wrapper = document.getElementById("wrapper");
    let list = document.getElementById("list");
    let listInitWidth = list.offsetWidth;

    /**
     * 判断如果文字列表整体宽度小于滚动容器宽度，则向列表追加元素，并调用自身再次进行判断
     */
    function isAddItem() {
        if (wrapper.offsetWidth * 2 < list.offsetWidth) return;

        Array.from(list.children).forEach(item => {
            let _li = item.cloneNode(true);
            list.appendChild(_li);
        });

        isAddItem();
    }

    // 移动
    function move() {
        let currentLeft = 0; // 初始化ul的left值
        let timer = setInterval(() => {
            if (Math.abs(currentLeft) >= listInitWidth) {
                currentLeft = 0;
                list.style.left = 0;
                return;
            }

            list.style.left = --currentLeft + "px";
        }, 20);
    }

    isAddItem();
    move();
</script>
</body>
</html>